<script setup>
import { getWarehouseBoardYjcb } from '@/api/visual/warehouseBoard'
import { fontSize } from '@/utils/globalMethod.js'
import { color } from 'echarts'
import moment from 'moment'

const optionData = ref([])
const month = computed(() => {
  return ['', '', '', '', '', '']
    .reduce((curr, prev, index) => {
      curr.push(Number(moment().subtract(index, 'months').format('MM')) + '月')
      return curr
    }, [])
    .reverse()
})
const option = computed(() => ({
  title: {
    text: '最近6个月库存结余对比分析',
    textStyle: {
      color: '#fff',
      fontSize: fontSize(0.16)
    }
  },
  xAxis: {
    type: 'category',
    data: month.value,
    axisLabel: {
      color: '#ccc1c1'
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#2b2c33'
      }
    },
    axisLabel: {
      color: '#ccc1c1'
    }
  },
  grid: {
    bottom: '15%',
    top: '15%',
    left: '15%'
  },
  series: [
    {
      data: optionData.value,
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        color: '#fff',
        textStyle: {
          fontSize: fontSize(0.12)
        }
      },
      itemStyle: {
        color: '#409eff'
      }
    }
  ]
}))

const loadData = async () => {
  const { data } = await getWarehouseBoardYjcb()
  optionData.value = [
    Number(data[0].y6).toFixed(2),
    Number(data[0].y5).toFixed(2),
    Number(data[0].y4).toFixed(2),
    Number(data[0].y3).toFixed(2),
    Number(data[0].y2).toFixed(2),
    Number(data[0].y1).toFixed(2)
  ]
}

onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100">
    <ps-chart2 :option="option"></ps-chart2>
  </div>
</template>

<style scoped lang="scss"></style>
